<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-06-01 15:29:42
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-06-08 17:08:24
 * @FilePath: \app\src\views\el\svgIcons\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="icons-box">
      <SvgIcon
        v-for="(icon, i) in icons"
        :key="i"
        :iconClass="icon"
        class="icon"
      ></SvgIcon>
    </div>

    <el-popover
      placement="bottom-start"
      width="460"
      trigger="click"
      @show="$refs['iconSelect'].reset()"
    >
      <IconSelect ref="iconSelect" @selected="selected" :value="form.icon" />
      <el-input
        slot="reference"
        v-model="form.icon"
        placeholder="点击选择图标"
        readonly
        style="width:485px"
        size="small"
      >
        <svg-icon
          v-if="form.icon"
          slot="prefix"
          :icon-class="form.icon"
          class="el-input__icon"
          style="height: 32px; width: 16px"
        />
        <i v-else slot="prefix" class="el-icon-search el-input__icon" />
      </el-input>
    </el-popover>
  </div>
</template>

<script>
import icons from "./requireIcons";
import SvgIcon from "@/components/SvgIcon";
import IconSelect from "./IconSelect";
export default {
  components: { SvgIcon,IconSelect },
  data() {
    return {
      icons,
      form:{
          icon: "",
      }
    };
  },
  methods: {
    selected(icon) {
      this.form.icon = icon;
    },
  },
};
</script>

<style lang="less" scoped>
.icon {
  font-size: 100px;
}
</style>